<template>
  <!-- 首页标题栏，轮播图整合插件 -->
  <view class="banner-swiper-wrap u-m-b-10">
    <!-- 标题栏 -->
    <view class="u-navbar u-navbar-fixed" :style="{background: 'url('+navBgImage+')','background-size': '100%',height:styleheight}">
      <view class="u-navbar-inner" :style="[navbarInnerStyle]">
        <view style="" class="u-navbar-inners">
          <view class="nav-back" @click="navBack()">
            <u-icon name="arrow-left" color="#ffffff" size="34"></u-icon>
            <!--          <view class="image-wrapper"><image src="https://d-duomi.bigchun.com/images/black-back.png" mode="aspectFit"></image></view>-->
          </view>
          <view class="nav-txt flex1">{{ navTitle }}</view>
          <slot></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
/**
 * home-head-轮播卡片,主要为了处理数据
 * @property {Array} list 轮播图数据，
 * @property {String} mode 指示器模式
 * @property {String} navTitle 项目名称
 */
export default {
  components: {},
  data() {
    return {
      navBgImage: 'https://d-duomi.bigchun.com/images/Group1941.png',
      changeNavBackground: false,
      swiperCur: 0,
      statusBarHeight: systemInfo.statusBarHeight,
      styleheight:''
    };
  },
  props: {
    navTitle: {
      type: String,
      default: '确认订单'
    },
    navTitleStyle: {
      type: Object,
      default: () => {
        return {
          color: '#000',
          fontSize: '38rpx'
        };
      }
    }
  },
  watch: {

  },
  computed: {
    // 导航栏内部盒子的样式
    navbarInnerStyle() {
      if(this.statusBarHeight == '20'){
        this.statusBarHeight = 10
      }
      let style = {};
      style.height =(this.navbarHeight+this.statusBarHeight)  + 'px';
      // #ifdef MP
      let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
      if(this.statusBarHeight != '20'){
        // style.marginTop = 10 + 'px';
      }
      style.marginRight = 14 + 'px';
      // #endif
      this.styleheight = style.height;
      return style;
    },
    // 整个导航栏的样式
    navbarStyle() {
      let style = {};
      style.zIndex = '11000';
      style.background = `url(${this.navBgImage}) no-repeat top / 100% auto`;
      Object.assign(style, this.background);
      return style;
    },
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return 44;
      // #endif
      // #ifdef MP
      return systemInfo.platform == 'ios' ? 44 : 48;
      // #endif
    }
  },
  created() {
  },
  methods: {
    navBack() {
      uni.navigateBack()
    },
  }
};
</script>

<style lang="scss" scoped>
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.u-navbar {
  width: 100%;
  background: url(https://d-duomi.bigchun.com/images/Frame108.png) no-repeat;
  background-size: 100% auto;
  display: flex;
  .nav-txt{
    height: 80rpx;
    color:#ffffff;
    font-weight:bold;
    font-size: 34rpx;
    width: 100%;
    text-align: center;
    vertical-align: bottom;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav-back{
    margin-left: 20rpx;
     margin-bottom:16rpx;
  }
}

.u-navbar-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 19991;
}

.u-status-bar {
  width: 100%;
}

.u-navbar-inner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;

}
.u-navbar-inners{
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  height: 100% !important;
}
.u-back-wrap {
  @include vue-flex;
  align-items: center;
  flex: 1;
  flex-grow: 0;
  padding: 14rpx 14rpx 14rpx 24rpx;
}
/deep/.u-input,/deep/.u-content{
  background: #ffffff!important;
}
</style>
